<template>
    <section class="">
        <div class="main_center">
            <div class="titlebox">
                <div class="main_information">
                    <div class="pr_name">设备名称：<span>{{deviceData.name}}</span></div>
                    <div class="pr_state">
                        <div class="point_green"></div>
                        <span>已发布</span>
                    </div>
                    <div class="state_cz"><span>停用</span></div>
                    <div class="buttonbox">
                        <el-button type="primary" size="small" icon="el-icon-refresh">应用配置</el-button>
                    </div>
                </div>
                <div class="equipment_box">
                    <div class="equipmentnum">
                        ID：<span>{{deviceData.id}}</span>
                    </div>
                    <div class="equipment_cp">所属产品：{{deviceData.productName}}</div>
                    <div class="equipment_view">查看</div>
                </div>
            </div>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="设备信息" name="cpxx">
                <detailsinformation v-if="activeName == 'cpxx'" @updata="updataf"></detailsinformation>
            </el-tab-pane>
            <el-tab-pane v-if="subsystemCode!='iot_cps'" label="运行状态" name="yxzt">
                <attdef v-if="activeName == 'yxzt'"></attdef>
            </el-tab-pane>
            <el-tab-pane label="物理模型" name="wlmx">
                <el-tabs v-if="activeName == 'wlmx'"  type="border-card">
                    <el-tab-pane label="属性定义">
                        <attdef :type="'device'"></attdef>
                    </el-tab-pane>
                    <el-tab-pane label="功能定义">
                        <functionconfig :type="'device'"></functionconfig>
                    </el-tab-pane>
                    <el-tab-pane label="事件定义"> 
                        <eventconfig :type="'device'"></eventconfig>
                    </el-tab-pane>
                    <!-- <el-tab-pane label="标签定义">标签定义</el-tab-pane> -->
                  </el-tabs>
            </el-tab-pane>
            <el-tab-pane :label="subsystemCode=='iot_cps'?'开门记录':'日志管理'" name="rzgl">
                <attdef v-if="activeName == 'rzgl'"></attdef>
            </el-tab-pane>
            <el-tab-pane v-if="subsystemCode!='iot_cps'" label="告警设置" name="gjsz">
                <el-tabs v-if="activeName == 'gjsz'" type="border-card">
                    <el-tab-pane label="告警设置" >
                        <alarmconfig></alarmconfig>
                    </el-tab-pane>
                    <el-tab-pane label="告警记录" >告警记录</el-tab-pane>
                  </el-tabs>
            </el-tab-pane>
            <el-tab-pane v-if="subsystemCode!='iot_cps'" label="可视化" name="ksh">
                <attdef v-if="activeName == 'ksh'"></attdef>
            </el-tab-pane>
            <el-tab-pane v-if="subsystemCode!='iot_cps'" label="设备影子" name="sbyz">
                <attdef v-if="activeName == 'sbyz'"></attdef>
            </el-tab-pane>
        </el-tabs>
    </section>
</template>

<script>
    import detailsinformation from "./device_detile_infor"
    import attdef from "./pm_attdef"
    import functionconfig from "./function_config"
    import eventconfig from "./event_config"
    import alarmconfig from "./alarm_config"
    import {iotdevicebyid } from "../../url/api"
    export default {
        data() {
            return {
                activeName: 'cpxx',
                deviceData: {},
                producturl: '',
                srcList: [],
                subsystemCode:'',
            };
        },
        methods: {
            handleClick(tab, event) {
                // console.log(tab, event);
            },
            getdata() {
                let row = JSON.parse(sessionStorage.getItem('deviceData'));
                let params = {
                    id: row.id
                }
                iotdevicebyid(params).then((res) => {
                    console.log(res)
                    if (res.data.ok == true) {
                        this.deviceData = res.data.data;
                        this.subsystemCode = res.data.data.subsystemCode;
                    } else {
                        this.$message(res.data.message);
                    }
                    console.log(this.deviceData);
                })
                this.producturl = this.deviceData.photoUrl;
                this.srcList.push(this.deviceData.photoUrl);
                console.log(this.deviceData);
            },
            updataf(data) {
                let params = {
                    id: data.id
                }
                iotdevicebyid(params).then((res) => {
                    //console.log(res)
                    if (res.data.ok == true) {
                        this.deviceData = res.data.data;
                    } else {
                        this.$message(res.data.message);
                    }
                    console.log(this.deviceData);
                })

            },

        },
        mounted() {
            this.getdata();
        },
        components: {
            detailsinformation,
            attdef,
            alarmconfig,
            functionconfig,
            eventconfig,
        }
    };
</script>
<style scoped>
    .titlebox {
        /* height: 150px; */
        padding: 20px;
    }

    .main_information {
        display: flex;
        position: relative;
    }

    .pr_name {
        font-size: 18px;
    }

    .point_green {
        display: inline-block;
        width: 6px;
        border-radius: 50%;
        background: green;
        height: 6px;
        position: relative;
        top: -2px;
    }

    .pr_state {
        margin-left: 20px;
        font-size: 15px;
        line-height: 28px;
    }

    .state_cz {
        margin-left: 20px;
        font-size: 15px;
        color: blue;
        line-height: 28px;
    }

    .equipment_box {
        display: flex;
        margin-top: 30px;
        font-size: 12px;
    }

    .equipment_view {
        margin-left: 20px;
        color: blue;
        /* margin-bottom: 20px; */
    }
    .equipment_cp{
        margin-left: 20px;
    }

    .buttonbox {
        position: absolute;
        right: 0px;
    }
</style>